<template>
  <BasicModal @register="register" title="转让指定代理" @ok="handleOk">
    <a-form>
      <a-form-item label="请输入指定代理账号" required>
        <a-input required v-model:value="formRef.username" />
        <div v-if="formRef.username" :style="{ color: isTrue ? 'green' : 'red' }">{{
          isTrue ? '账号有效' : '账号无效'
        }}</div>
      </a-form-item>
    </a-form>
    <div v-html="diglogInfo.content"></div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { AgentStatusApi, TransferApi } from '@/api/payment';
  import { getReminderInfo } from '@/utils/helper';
  import { message } from 'ant-design-vue';

  const info = ref<any>({});
  const formRef = ref({
    username: '',
  });
  const emit = defineEmits(['ok']);
  const isTrue = ref(false);
  const diglogInfo = ref<any>({});

  const [register, { closeModal }] = useModalInner((data) => {
    info.value = data.info;
  });

  onMounted(async () => {
    diglogInfo.value = await getReminderInfo('app_transfer');
  });

  watch(
    () => formRef.value.username,
    async (val) => {
      const { code } = await AgentStatusApi({ username: val });
      console.log(code);
      isTrue.value = code == 1;
    },
  );

  function handleOk() {
    TransferApi({
      username: formRef.value.username,
      orderNo: info.value.orderNo,
    }).then(() => {
      message.success('转让成功');
      closeModal();
      emit('ok');
    });
  }
</script>
